<template>
  <div class="activity-timeline">
    <div v-if="loading" class="activity-loading">
      <el-skeleton v-for="i in 5" :key="i" animated>
        <template #template>
          <el-skeleton-item variant="circle" style="width: 32px; height: 32px;" />
          <div style="margin-left: 16px; flex: 1">
            <el-skeleton-item variant="text" style="width: 30%" />
            <el-skeleton-item variant="text" style="width: 80%" />
          </div>
        </template>
      </el-skeleton>
    </div>
    
    <div v-else-if="activities.length === 0" class="activity-empty">
      <el-empty description="暂无活动记录" :image-size="80" />
    </div>
    
    <div v-else class="activity-items">
      <div 
        v-for="(activity, index) in activities" 
        :key="activity.id"
        class="activity-item"
        :class="`type-${activity.type}`"
      >
        <div class="activity-timeline-line" :class="{ 'last-item': index === activities.length - 1 }">
          <div class="activity-icon">
            <el-icon :color="getTypeColor(activity.type)">
              <component :is="getTypeIcon(activity.type)" />
            </el-icon>
          </div>
        </div>
        
        <div class="activity-content">
          <div class="activity-title">
            {{ activity.title }}
          </div>
          <div class="activity-desc">
            {{ activity.description }}
          </div>
          <div class="activity-meta">
            <span class="activity-time">{{ formatTime(activity.time) }}</span>
            <span v-if="activity.user" class="activity-user">
              by {{ activity.user }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from '@vue/runtime-core'
import { 
  Checked, Upload, Setting, User 
} from '@element-plus/icons-vue'

interface Activity {
  id: string
  type: 'reconciliation' | 'import' | 'system'
  title: string
  description: string
  time: string
  user?: string
  metadata?: any
}

interface Props {
  activities: Activity[]
  loading?: boolean
}

const props = defineProps<Props>()

const getTypeColor = (type: 'reconciliation' | 'import' | 'system') => {
  const colors = {
    reconciliation: '#52c41a',
    import: '#1890ff',
    system: '#722ed1'
  } as const
  return colors[type] || '#1890ff'
}

const getTypeIcon = (type: 'reconciliation' | 'import' | 'system') => {
  const icons = {
    reconciliation: Checked,
    import: Upload,
    system: Setting
  } as const
  return icons[type] || User
}

const formatTime = (timeString: string) => {
  const date = new Date(timeString)
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
  
  if (diffDays === 0) {
    return '今天 ' + date.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    })
  } else if (diffDays === 1) {
    return '昨天 ' + date.toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    })
  } else {
    return date.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    })
  }
}
</script>

<style scoped lang="scss">
.activity-timeline {
  .activity-loading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    .el-skeleton {
      display: flex;
      align-items: center;
      gap: 16px;
    }
  }
  
  .activity-empty {
    padding: 20px 0;
  }
  
  .activity-items {
    display: flex;
    flex-direction: column;
    
    .activity-item {
      display: flex;
      gap: 12px;
      
      .activity-timeline-line {
        position: relative;
        width: 32px;
        flex-shrink: 0;
        
        &::before {
          content: '';
          position: absolute;
          left: 15px;
          top: 32px;
          width: 2px;
          height: 100%;
          background: #f0f0f0;
        }
        
        &.last-item::before {
          display: none;
        }
        
        .activity-icon {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: white;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid currentColor;
          box-sizing: border-box;
        }
      }
      
      .activity-content {
        flex: 1;
        padding-bottom: 16px;
        
        .activity-title {
          font-weight: 500;
          color: #1f2d3d;
          margin-bottom: 4px;
        }
        
        .activity-desc {
          font-size: 13px;
          color: #606266;
          margin-bottom: 8px;
          line-height: 1.4;
        }
        
        .activity-meta {
          display: flex;
          align-items: center;
          gap: 12px;
          
          .activity-time {
            font-size: 12px;
            color: #909399;
          }
          
          .activity-user {
            font-size: 12px;
            color: #c0c4cc;
          }
        }
      }
    }
  }
}
</style>